/**
 * Class: OpenLayers.Control.AddCustomMarker
 * 添加自定义标注
 * 继承自: - <OpenLayers.Control>
 * @requires OpenLayers/Control.js
 */

OpenLayers.Control.CustomPointMarker = OpenLayers.Class(OpenLayers.Control,{
	/**
	 * 工具类型
	 * @property type
	 * @type {String}
	 */
	type : OpenLayers.Control.TYPE_TOOL,
	/**
	 * 样式
	 * @property styleMap
	 * @type {Object}
	 */
	styleMap : null,
	/**
	 * 标题
	 * @property title
	 * @type {String}
	 */
	title : "点标注",
	/**
	 * 标注类型
	 * @property markerType
	 * @type {String}
	 */
	markerType: "point",
	/**
	 * 图层
	 * @property layer
	 * @type {Object}
	 */
	layer: null,
	/**
	 * feature选择工具
	 * @property layer
	 * @type {Object}
	 */
	selectctrl: null,
	
	/**
	 * 默认样式类型
	 * @property querySymbolizers
	 * @type {Object}
	 */
	querySymbolizers: {
		"Point" : {
			pointRadius : 4,
			graphicName : "square",
			fillColor : "white",
			fillOpacity : 1,
			strokeWidth : 1,
			strokeOpacity : 1,
			strokeColor : "#333333"
		},
		"Line" : {
			strokeWidth : 3,
			strokeOpacity : 1,
			strokeColor : "#666666",
			strokeDashstyle : "dash"
		},
		"Polygon" : {
			strokeWidth : 1,
			strokeOpacity : 1,
			strokeColor : "#666666",
			fillColor : "white",
			fillOpacity : 0.5,
			cursor: "pointer"
		}
	},
	
	currentFeature: null,
    
	/**
	 * Method: initialize 初始化
	 */
	initialize : function(options) {
		OpenLayers.Control.prototype.initialize.apply(this,arguments);
		
		this.handler = new OpenLayers.Handler.Point(this, {
			done : this.openInfoPopup
		});
	},

	/**
	 * Method: activate 控件被触发时设置鼠标手势
	 */
	activate : function() {
		OpenLayers.Control.prototype.activate.apply(this,arguments);
		
		this.removePopup();
		for(var i in this.layer.features){
            if(!this.layer.features[i].saved){
                this.layer.removeFeatures(this.layer.features[i]);
            }
		}
		var cursor = "url("+OpenLayers.Util.getRootPath()+"img/point.ico) 5 10,auto";
        this.map.layerContainerDiv.style.cursor = cursor;
	},
	
	deactivate: function(){
	    this.removePopup();
		OpenLayers.Control.prototype.deactivate.apply(this,arguments);
		this.map.layerContainerDiv.style.cursor = this.map.defaultCursor;
	},
	
	_deactivate: function(){
		OpenLayers.Control.prototype.deactivate.apply(this,arguments);
		this.map.layerContainerDiv.style.cursor = "url("+OpenLayers.Util.getRootPath()+"img/Pan.cur),auto";
	},

	/**
	 * Method: draw
	 */
	draw : function() {
        var scope = this;
        if(this.layer && !this.layer.selectctrl){
            OpenLayers.Feature.Vector.style["default"]["cursor"] = "pointer";
            this.selectctrl = new OpenLayers.Control.SelectFeature(this.layer, {
                hover: false,
                clickout: true,
                onSelect: function(feature){
                    scope.removePopup();
                    scope.addPopup(feature);
                    this.unhighlight(feature);
                }
            });
            this.selectctrl.handlers.feature.stopDown = false;
            this.map.addControl(this.selectctrl);
            this.selectctrl.activate();
            this.layer.selectctrl = this.selectctrl;
        }
	},

	/**
	 * 响应事件打开填写详细的气泡
	 * @method executeQuery
	 * @param {Object} evt
	 */
	openInfoPopup : function(evt) {
		var feature = this.drawFeature(evt);
		var format = new OpenLayers.Format.WKT();
        var wkt = format.extractGeometry(evt);
        feature.wkt = wkt;
        
        this.addPopup(feature);
		this._deactivate();
	},
	
	addPopup: function(feature){
        this.removePopup();
        var bounds = feature.geometry.getBounds();
        lonlat = bounds.getCenterLonLat();
        
        var scope = this;
        var popup = new OpenLayers.BubblePopup(lonlat,{
			width: 280,
			height: 220,
			title: "标注详细信息",
			content: this.createContent(feature),
			skin: "cloud",
			closeBoxCallback: function(){
                if(!feature.saved){
                    scope.layer.removeFeatures(feature);
                }
			}
		});
		
		this.popup = popup;
		this.map.addPopup(this.popup);
		
		$(".b_cancle", popup.div).click(function(){
            popup.hide();
            scope.layer.removeFeatures(feature);
            scope.deleted(feature);
		});
		
		$(".b_save", popup.div).click(function(){
            scope.save(feature, popup);
		});
	},
	
	removePopup: function(){
        if(this.popup){
            this.map.removePopup(this.popup);
            this.popup = null;
        }
	},
	
	save: function(feature, popup){
        var title = $(".b_textfield", popup.div).val();
        var detailinfo = $(".b_detailinfo", popup.div).val();
        
        feature.attributes = {
            name: title,
            info: detailinfo
        }
        feature.saved = true;
        
		feature.style = {
			strokeOpacity : 1,
			fillColor : "#ee9900",
			fillOpacity : 0.3,
			cursor: "pointer",
			pointRadius : 4,
			graphicName : "square",
			strokeWidth : 3,
			strokeColor : "#ee9900",
			strokeDashstyle : "solid",
			pointerEvents: "visiblePainted",
			labelAlign: "cm",
            labelOutlineColor: "white",
            labelOutlineWidth: 1,
            fontColor: "#333333",
			label: title
		};
		
        this.layer.drawFeature(feature);
        
        this.removePopup();
        
        this.saved(feature);
	},
	
	saved: function(feature){
	    
	},
	
	deleted: function(feature){
	    
	},
	
	/**
	 * evt转为空间对象geometry 
	 */
	getGeometry : function(evt) {
		var wkt = null;
        if(this.markerType == "point"){
            var lonlat = this.map.getLonLatFromViewPortPx(evt.xy);
            wkt = "POINT("+lonlat.lon+" "+lonlat.lat+")";
        }
        if(this.markerType == "line" || this.markerType == "polygon"){
            var feature = this.drawFeature(evt);
            var format = new OpenLayers.Format.WKT();
		    wkt = format.extractGeometry(evt);
        }
        
        return wkt;
	},
	
	/**
     * Method: drawFeature
     */
    drawFeature: function(geometry) {
        var feature = new OpenLayers.Feature.Vector(geometry);
        this.currentFeature = feature;
        var proceed = this.layer.events.triggerEvent(
            "sketchcomplete", {feature: feature}
        );
        if(proceed !== false) {
            feature.state = OpenLayers.State.INSERT;
            this.layer.addFeatures([feature]);
        }
        
        return feature;
    },
    
    createContent: function(feature){
        var name = feature ? feature.attributes.name : null;
        var info = feature ? feature.attributes.info : null;
      return '<table class="b_markerInfo">'+
        '<tr>'+
        '<td class="b_label">名称:</td><td><input class="b_textfield" value="'+(name||"")+'"></td>'+
        '</tr>'+
        '<tr>'+
        '<td class="b_label">备注:</td><td><textarea class="b_detailinfo">'+(info||"")+'</textarea></td>'+
        '</tr>'+
        '<tr>'+
        '<td colspan="2" align="right"><input type="button" class="b_cancle" value="删 除"><input type="button" class="b_save" value="保 存"></td>'+
        '</tr>'+
        '</table>';
    },

	CLASS_NAME : "OpenLayers.Control.CustomPointMarker"
});